<template>
  <div class="image-container">
    <!-- 标签展示区域 -->
    <div class="tag-section">
      <div class="tag-row">
        <span class="tag-title">一级分类：</span>
        <div class="tags">
          <button v-for="tag in level1Tags" :key="tag.tagId" @click="handleTagClick(tag.tagId, 1)">
            {{ tag.tagName }}
          </button>
        </div>
      </div>
      <div class="tag-row" v-if="level2Tags.length > 0">
        <span class="tag-title">二级分类：</span>
        <div class="tags">
          <button v-for="tag in level2Tags" :key="tag.tagId" @click="handleTagClick(tag.tagId, 2)">
            {{ tag.tagName }}
          </button>
        </div>
      </div>
      <div class="tag-row" v-if="level3Tags.length > 0">
        <span class="tag-title">三级分类：</span>
        <div class="tags">
          <button v-for="tag in level3Tags" :key="tag.tagId" @click="handleTagClick(tag.tagId, 3)">
            {{ tag.tagName }}
          </button>
        </div>
      </div>
    </div>

    <!-- 图片展示区域 -->
    <div class="image-gallery" v-if="paginatedImages.length > 0">
      <div class="images">
        <div v-for="image in paginatedImages" :key="image.id" class="image-item">
          <!-- 判断是图片还是视频 -->
          <template v-if="isImage(image.file_name)">
            <img :src="getImageUrl(image.id)" :alt="image.file_name" @click="toggleFullScreen(image)" />
          </template>
          <template v-else-if="isVideo(image.file_name)">
            <video :src="getImageUrl(image.id)" controls @click="toggleFullScreen(image)" />
          </template>
          <p :title="image.file_name">{{ truncateText(image.file_name, 15) }}</p>
        </div>
      </div>

      <!-- 分页控件 -->
      <div class="pagination">
        <label>
          每页显示:
          <select v-model="pageSize" @change="changePageSize">
            <option v-for="size in [5, 10, 15, 20]" :key="size" :value="size">{{ size }}</option>
          </select>
        </label>
        <button @click="prevPage" :disabled="currentPage === 1">上一页</button>
        <button v-for="page in displayedPages" :key="page" @click="gotoPage(page)" :class="{ active: currentPage === page }">
          {{ page }}
        </button>
        <button @click="nextPage" :disabled="currentPage === totalPages">下一页</button>
      </div>
    </div>

    <!-- 全屏显示图片或视频 -->
    <div v-if="fullScreenImage" class="full-screen" @click="toggleFullScreen(null)">
      <template v-if="isImage(fullScreenImage.file_name)">
        <img :src="getImageUrl(fullScreenImage.id)" :alt="fullScreenImage.file_name" />
      </template>
      <template v-else-if="isVideo(fullScreenImage.file_name)">
        <video :src="getImageUrl(fullScreenImage.id)" controls autoplay />
      </template>
    </div>
  </div>
</template>

<script>
import {fetchLevel1Tags, fetchLevel2Tags, getImageTablesLoop, getImageUrl} from '@/components/js/ImageService'; // 导入 tagService

export default {
  data() {
    return {
      level1Tags: [],
      level2Tags: [],
      level3Tags: [],
      images: [],
      currentPage: 1,
      pageSize: 10,
      fullScreenImage: null
    };
  },
  computed: {
    totalPages() {
      return Math.ceil(this.images.length / this.pageSize);
    },
    paginatedImages() {
      const start = (this.currentPage - 1) * this.pageSize;
      return this.images.slice(start, start + this.pageSize);
    },
    displayedPages() {
      let total = this.totalPages;
      let start = Math.max(1, this.currentPage - 5);
      let end = Math.min(total, start + 9);
      return Array.from({ length: end - start + 1 }, (_, i) => start + i);
    }
  },
  methods: {
    async fetchLevel1Tags() {
      this.level1Tags = await fetchLevel1Tags(); // 调用提取后的方法
    },
    async handleTagClick(tagId, level) {
      try {
        await this.fetchImages(tagId);
        if (level === 1) {
          this.level2Tags = await fetchLevel2Tags(tagId);
          this.level3Tags = [];
        } else if (level === 2) {
          this.level3Tags = await fetchLevel2Tags(tagId);
        }
      } catch (error) {
        console.error(`获取数据失败:`, error);
      }
    },
    async fetchImages(tagId) {
      try {
        this.images = await getImageTablesLoop(tagId);
        this.currentPage = 1;
      } catch (error) {
        console.error('获取图片失败:', error);
      }
    },
    getImageUrl(imageId) {
      return getImageUrl(imageId);
    },
    isImage(fileName) {
      return /\.(jpg|jpeg|png|gif|webp)$/i.test(fileName);
    },
    isVideo(fileName) {
      return /\.(mov|mp4|avi|webm)$/i.test(fileName);
    },
    toggleFullScreen(image) {
      this.fullScreenImage = image;
    },
    truncateText(text, maxLength) {
      return text.length > maxLength ? text.substring(0, maxLength) + '...' : text;
    },
    // 新增 gotoPage 方法
    gotoPage(page) {
      if (page >= 1 && page <= this.totalPages) {
        this.currentPage = page;
      }
    },
    prevPage() {
      if (this.currentPage > 1) {
        this.currentPage--;
      }
    },
    nextPage() {
      if (this.currentPage < this.totalPages) {
        this.currentPage++;
      }
    },
    changePageSize() {
      this.currentPage = 1;
    }
  },
  mounted() {
    this.fetchLevel1Tags();
  }
};
</script>

<style scoped>
@import '@/css/styles.css';
</style>
